<template>
	<view>
		<!-- <up-picker :show="show" :columns="columns"></up-picker> -->
		<up-calendar :show="show" :mode="mode" @confirm="confirm" @close="show = false"></up-calendar>
		<up-button @click="show = true">打开选择器</up-button>

		<view >
			<up-modal :show="showmodal" title="标题" content='uview-plus的目标是成为uni-app生态最优秀的UI框架'></up-modal>
			<up-button @click="showmodal = true">打开模态框</up-button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';

const show = ref(false);
const mode = ref('range');

const confirm = (e) => {
  console.log(e);
};
const showmodal = ref(false);

const columns = reactive([
  ['中国', '美国', '日本']
]);
</script>
<style>
::v-deep .u-calendar-header{
	text-align: center;
}
::v-deep .u-calendar-month__title{
	padding-left: 20px;
}
</style>